<template>
  <div :id="DOMID" style="width: 100%; height: 60vh"></div>
</template>

<script lang="ts">
import * as echarts from "echarts";
import { PropType, ref } from "vue";
import { defineComponent } from "vue-demi";
export default defineComponent({
  name: "EchartsScope",
  props: {
    options: {
      type: Object as PropType<echarts.EChartsOption>,
      required: true,
    },
  },
  setup() {
    return {
      DOMID: ref(`chart-${Math.random()}`),
      visible: ref(false),
      chart: null as any,
    };
  },
  mounted() {
    this.chart = echarts.init(
      document.getElementById(this.DOMID) as HTMLDivElement
    );
    this.visible = true;
    this.$nextTick().then(() => {
      this.chart.setOption(this.options);
    });
  },

  watch: {
    visible: {
      deep: true,
      handler: function(this:any){
        this.chart.resize()
      }
    },
    options: {
      deep: true,
      handler: function (this: any) {
        this.chart.setOption(this.options);
      },
    },
  },
});
</script>

<style></style>
